<template>
  <!-- 案例详情 -->
  <!-- <div>{{ details }}</div> -->
  <div>
    <div class="details-box">
      <!-- 标题 -->
      <div class="details-title">
        <span class="csaeFirst">案例></span>
        <span class="caseSmaslll">(资产管理系统) DRG/DIP管理系统详情</span>
      </div>
      <!-- 案例详情信息 -->
      <div class="details-information">
        <el-image :src="carousel" class="informationImage" />
        <div class="information-concrete">
          <div class="information-title">
            <span class="titleFirst">(资产管理系统) DRG/DIP管理系统详情</span>
            <div class="edition">v1.0</div>
          </div>
          <!-- 需求类型 -->
          <div>
            <span class="left-title">需求类型：</span>
            <span class="right-content">整包项目</span>
            <span class="left-role left-title">参与角色：</span>
            <span class="right-content">产品、前端、后端、测试</span>
          </div>
          <!-- 需求周期： -->
          <div>
            <span class="left-title">需求周期：</span>
            <span class="right-content">60天</span>
          </div>
          <!-- 项目链接： -->
          <div @click="goNetwork">
            <span class="left-title">项目链接：</span>
            <span class="netWork">www:baidu.com</span>
          </div>
          <!-- 钱 -->
          <div class="left-money">
            <span class="dollar">￥</span>
            <span class="moneyContent">2.000.000</span>
          </div>
        </div>
      </div>
      <!-- 项目介绍 -->
      <div class="project-introduce">
        <div class="twoBox">项目介绍</div>
        <div class="introduce-content">
          本作品是一款基于医院视角设计的DRG/DIP管理系统，其中包含:医保结算清单质控(无医保结算清单可视化)质控规则管理、DRG分组方案管理、DIP分组方案管理、DRG/DIP入组结果分析、DRG/DIP数据质量分析、DRG/DIP医疗服务能力分析、DRG/DIP医疗服务质量分析、DRG/DIP医疗费用控制、用户管理、角色管理、模块管理等功能
        </div>
      </div>
      <!-- 项目展示 -->
      <div class="project-exhibition">
        <div class="twoBox">项目展示</div>
        <div class="exhibitionList">
          <el-image :src="carousel" class="exhibition-image" />
          <el-image :src="carousel" class="exhibition-image" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, defineProps } from "vue";
import {
  carousel
} from "@/config/userFileImg.js";
const props = defineProps({
  details: {
    type: Object,
    default: {},
  },
  //数据ID
  detailsId: {
    type: String,
    default: "",
  },
});
// 跳转网址
const goNetwork=()=>{
    window.open('/index/jump.vue', '_blank');
}
</script>
<style lang="scss" scoped>
.details-box {
  display: flex;
  flex-direction: column;
  min-height: 800px;
  padding: 60px 360px 0 360px;
}
.details-title {
  padding-bottom: 24px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
}
.csaeFirst {
  font-weight: 400;
  font-size: 14px;
  color: #848990;
}
.caseSmaslll {
  font-weight: 400;
  font-size: 14px;
  color: #333333;
}
// 案例详情信息
.details-information {
  display: flex;
  gap: 16px;
  padding: 24px 0 25px 24px;
  height: 202px;
  background: #ffffff;
  border-radius: 16px;
  .informationImage {
    width: 289px;
    height: 178px;
    border-radius: 8px;
  }
}
.information-concrete {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 178px;
}
.information-title {
  display: flex;
  font-family: PingFang SC, PingFang SC;
  font-style: normal;
  text-transform: none;
  gap: 22px;
}
.titleFirst {
  font-weight: 600;
  font-size: 24px;
  color: #333333;
}
.edition {
  width: 51px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: rgba(35, 116, 238, 0.13);
  border-radius: 4px;
  font-size: 16px;
  color: #165dff;
}
.left-role {
  margin-left: 24px;
}
.left-title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #86909c;
  font-style: normal;
  text-transform: none;
}
.right-content {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  font-style: normal;
  text-transform: none;
}
.netWork {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #165dff;
  font-style: normal;
  text-transform: none;
  cursor: pointer;
}
.left-money {
  font-family: PingFang SC, PingFang SC;
  color: #fc4c00;
  font-style: normal;
  text-transform: none;
}
.dollar {
  font-weight: 400;
  font-size: 12px;
}
.moneyContent {
  font-weight: 500;
  font-size: 20px;
}
// 项目介绍
.project-introduce {
  margin-top: 24px;
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 176px;
  background: #ffffff;
  border-radius: 16px;
  padding: 56px 0 40px 0;
}
.introduce-content {
  margin-top: 40px;
  width: 965px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 26px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
.twoBox {
  width: 96px;
  height: 58px;
  border-bottom: 4px solid #165dff;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 24px;
  color: #333333;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
// 项目展示
.project-exhibition {
  margin-top: 24px;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 388px;
  background: #ffffff;
  border-radius: 16px;
  padding: 56px 118px 40px 118px;
}
.exhibitionList {
  margin-top: 40px;
  display: flex;
  flex-flow: wrap;
  gap: 24px;
  width: 965px;
}
.exhibition-image {
  width: 470px;
  height: 290px;
}
</style>

